<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <title>船只管理</title>
</head>

<body>
<div class="page-content">
    <div class="gys_style">
        <div class="Manager_style">
            <div class="title_name">添加船只</div>
            <button type="button" class="btn btn-primary" id="Add_Ship_btn">添加船只</button>
            <div id="Add_Ship_style" style="display:none">
                <div class="Add_Manager_style">
                    <div class="add_user_style clearfix">
                        <form action="/test2.do" method="post" onsubmit="return validateForm()">
                            <ul class="clearfix">
                                <li><label class="label_name">油船名称</label> <input name="name" type="text"  class="name_text"/><i style="color:#F60; ">*</i></li>
                                <li><label class="label_name">油船联系人</label><input name="uname" type="text"  class="name_text"/><i style="color:#F60; ">*</i></li>
                                <li><label class="label_name">油船联系电话</label><input name="tel" type="text"  class="name_text"/><i style="color:#F60; ">*</i></li>
                                <li><label class="label_name">油船联系邮箱</label><input name="mail" type="text"  class="text_add"/></li>
                            </ul>
                            <div class="Remark"><label class="label_name">备注</label><textarea name="text" cols="" rows="" style=" width:434px; height:200px; padding:5px;"></textarea></div>
                            <!--      <div class="btn_operating"><button  type="button" class="btn btn-primary" id="submit">保存</button><button  type="button" class="btn btn-warning">重置</button></div>-->
                            <div style="text-align: center;">
                                <input type="submit" value="添加" style="display: inline-block;" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="Manager_style">
            <span class="title_name">船只信息</span>
            <table class="table table-striped table-bordered table-hover" id="app">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>联系人</th>
                    <th>联系电话</th>
                    <th>联系邮箱</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="s in Ship">
                    <td>{{s.id}}</td><td>{{s.name}}</td><td>{{s.uname}}</td><td>{{s.tel}}</td><td>{{s.mail}}</td><td>{{s.text}}</td>
                    <td><button type="button" class="btn btn-primary" onclick="window.location.href = '1船只修改.html'">修改</button> <button type="button" class="btn btn-warning" @click="d(s.id)">删除</button></td>
                </tr>
                </tbody>
            </table>
            <div class="page_style">
                <select name="" size="1">
                    <option value="1">10</option>
                    <option value="2">20</option>
                    <option value="3">30</option>
                </select>
                <a href="" class="icon-step-backward page_btn" ></a>
                <a href="" class="icon-caret-left page_btn"></a>
                第
                <select name="" size="1">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                共2页
                <a href="" class=" icon-caret-right page_btn"></a>
                <a href="" class="icon-step-forward page_btn"></a>
            </div>
        </div>
    </div>
</div>

<!--[if !IE]> -->
<script src="assets/js/jquery.min.js"></script>
<!-- <![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">

    $('#Add_Ship_btn').on('click', function(){
        layer.open({
            type: 1,
            title: '添加船只',
            shadeClose: true, //点击遮罩关闭层
            area : ['600px' , ''],
            content:$('#Add_Ship_style'),
            btn:[],
            yes:function(index, layero){
                var num=0;
                var str="";
                $(".name_text").each(function(n){
                    if($(this).val()=="")
                    {

                        layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                            title: '提示框',
                            icon:0,

                        });
                        num++;
                        return false;
                    } });
                if(num>0)
                {

                    return false;
                }
                else{

                    layer.alert('添加成功！',{
                        title: '提示框',
                        icon:1,
                    });
                    layer.close(index);
                }
            }
        });
    });
    //jQuery(document).ready(function(){
    //
    //  $("#submit").click(function(){
    //	// var num=0;
    //     var str="";
    //     $(".name_text").each(function(n){
    //          if($(this).val()=="")
    //          {
    //              // num++;
    //			   layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
    //                title: '提示框',
    //				icon:0,
    //          });
    //             // layer.msg(str+=""+$(this).attr("name")+"不能为空！\r\n");
    //             layer.close(index);
    //          }
    //		  else{
    //
    //			  layer.alert('添加成功！',{
    //               title: '提示框',
    //			icon:1,
    //			  });
    //		  }
    //
    //     });
    //
    //})
    // });
</script>
<script>
    new Vue({
        el:"#app",
        data:{
            Ship:[]
        },
        mounted(){
            this.getShip();
        },
        methods:{
            getShip(){
                axios.get("Shiplist.do").then(dt=>{
                    this.Ship = dt.data;
                })
            },
            d(id){
                axios.get("delete2.do?id="+id).then(
                )
                this.getShip()
            },
        }
    })
</script>
<script>
    function validateForm() {
        var name = document.getElementsByName('name')[0].value;
        var uname = document.getElementsByName('uname')[0].value;
        var tel = document.getElementsByName('tel')[0].value;

        if (name === '' || uname === '' || tel === '') {
            alert('请填写所有必填字段。');
            return false; // 阻止表单提交
        }

        return true; // 提交表单
    }
</script>
</body>
</html>
